<template>
	<view class="messageItem">
		
			<!-- 聊天对象显示该消息框 -->
			<item-box :chatMessage="chatMessage"  v-if="chatMessage.send_user_id!=$store.state.user.user.id"></item-box>
			
			<!-- 自己显示该消息框 -->
			<item-box :chatMessage="chatMessage" v-else></item-box>
	</view>
</template>

<script>
	import itemBox from './itemBox/itemBox.vue'
	export default {
		name:"chatMessageItem",
		props:{
			chatMessage:{
				type:Object,
					
				default:()=>({
						name:'小谢',
						headImg:'',
						message:'你多少破多少安静的是爬吉菩萨觉得菩萨就冒跌是多么案例吗沙发吗美丽的麦当劳 按摩什么的的麦当劳手动马路吗吃吗',
						time:'11:21',
						type:'reciver'
					})
			}
		},
			
		components:{
			itemBox
		},
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss" scoped>
		.messageItem{
			width: 100%;

			// border: 1px solid red;
		}
		
		.sendMessageBox{
			width: 100%;
			min-height: 100rpx;
			display: flex;
			
			.message{
				
				margin-left: 10rpx;
				.messagerName{
					color: #B2B2B2;
					font-size:22rpx ;
				}
				.messageContent{
					color: #232323;
					max-width: 500rpx;
					min-height:30rpx ;
					font-size: 30rpx;
					border-radius:0rpx 10rpx 10rpx 10rpx;
					background-color: #FFF;
					padding: 10rpx;
					word-wrap: break-word;
				}
			}
		}
		
		.reciverMessageBox{
			width: 100%;
			min-height: 100rpx;
			display: flex;
			flex-direction:row-reverse ;
			.message{
				
				margin-right: 10rpx;
				.messagerName{
					text-align: right;
					color: #B2B2B2;
					font-size:22rpx ;
				}
				.messageContent{
					color: #232323;
					min-height:30rpx ;
					max-width: 500rpx;
					font-size: 30rpx;
					border-radius:10rpx 0rpx 10rpx 10rpx;
					background-color: #9EEA6A;
					padding: 10rpx;
					word-wrap: break-word;
				}
			}
		}

</style>
